Fox 3.0 Router API

路由器router

router提供了api，对页面进行导航操作

方法

router方法接口

方法	参数	说明
addRoutes(routeConfigTable:RouteConfig[])	路由表:Array	加入路由配置列表
addRoute(routeConfig:RouteConfig,index?:number)	路由:RouteConfig, 索引:Number 可选)	加入路由
hasRoute(route:Route	string)	路由:Route
removeRoute(route:Route	string)	路由:Route)
push(route:Route	string)	路由:Route/String
replace(route:Route	string)	路由:Route/String
put(route:Route	string)	路由:Route/String
back(n)	n:回退步骤	回退
append(route:Route	string)	路由:Route/String
remove(term?:any)	条件:如果为空则移除最上层view，否则按条件移除view	移除router-view(多视图)中的view
open(route:Route	string)	路由:Route/String
close(route:Route	string)	路由:Route/String
to(route:Route	string)	路由:Route/String
beforeEach(filter:Function)	拦截器	加入路由跳转前拦截器
afterEach(filter:Function)	拦截器	加入路由跳转后拦截器
destroyEach(filter:Function)	拦截器	加入view销毁后拦截器
setNotFoundRoute(routeConfig)	路由配置:RouterOptions	设置无法匹配route后显示的错误view
setResolveDependency(resolveDependency)	resolveDependency:Function	设置依赖解析函数
onError(callback)	callback:Function	设置全局异常处理函数
onRouteUpdated(callback)	callback:Function	设置全局route改变处理函数

remove的条件参数说明 移除最上层的页面 无参数 移除所有append页面 term = {all:true} 移除到指定页面 term = {unit: '/ahout'}

路由配置RouteConfig

路由配置，设置component和path的路由关系，通过 router.addRoutes/router.addRoute接口设置路由配置

属性

RouteConfig路由配置

属性	类型	说明
path	string	路由路径
name	string	路由名称
redirect	string	转发路径
component	VNode	组件
components	{ [propName: string]: VNode }	组件映射（命名视图）
children	Array	孩子路由配置
props	Object	属性

路由配置表RouteConfig Table

路由设置路由和vue component的映射关系，router通过route table找到对应的vue component，并渲染到指定的fox-router-view中

常规路由表

fox router的常用模式

import RuleComponentQuery from '../page/rules/rule-component-query/index.vue'
    import PulicRule from '../page/rules/public-rule/index.vue'
    import ServiceRule from '../page/rules/service-rule/index.vue'
    import SceneSetting from '../page/rules/scene-setting/index.vue'
    import CheckConfig from '../page/rules/check-config/index.vue'
    // <import empty slot>
    
    // 路由表
    let routes = [
        {
            path: '/rules/rule-component-query',
            name: 'T03001',
            component: RuleComponentQuery,
        },
        {
            path: '/rules/public-rule',
            name: 'T03002',
            component: PulicRule,
        },
        {
            path: '/rules/service-rule',
            name: 'T03003',
            component: ServiceRule,
        },
        {
            path: '/rules/scene-setting',
            name: 'T03004',
            component: SceneSetting,
        },
        {
            path: '/rules/check-config',
            name: 'T03005',
            component: CheckConfig,
        },
        // <route empty slot>
    ]

嵌套路由表

兼容vue router模式

import home from '../components/home.vue'
    import header from '../components/header.vue'
    import menu from '../components/menu.vue'
    import content from '../components/content.vue'
    import list from '../components/list.vue'
    import detail from '../components/detail.vue'
    
    let routes = [
        {
            path: '/',
            redirect: '/home/menu'
        },
        {
            path: '/home',
            name: 'home',
            component: home,
            children: [{
                path: 'menu',
                components: {
                    header: header,
                    menu: menu,
                    content: content
                },
                children: [
                    {
                        path: 'list/:index',
                        name: 'list',
                        component: list
                    },
                    {
                        path: 'list/:index/detail/:detailIndex',
                        name: 'detail',
                        component: detail
                    }
                ]
            }]
        },
        {
            path: '/detailNoMenu',
            name: 'detailNoMenu',
            component: detail
        }
    ];

路由Route

路由，设置路由跳转配置。通过router.to/router.append/router.open接口进行路由导航

属性

Route路由

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法